<template>
    <div class="container">
        <page-tool :show-before="true">
            <!-- 左边插槽 -->
            <span slot="before">共6936条数据</span>
            <!-- 右边插槽 -->
            <template slot="after">
                <el-button type="primary">新增</el-button>
                <el-button type="warning">导出</el-button>
            </template>
        </page-tool>
        <el-card>
            <el-form :model="formData" label-position="left" :inline="true" size="small" @submit.native.prevent
                ref="searchForm" class="search-form">
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="订单编号" prop="orderNo">
                            <el-input clearable v-model.trim="formData.orderNo"></el-input>
                        </el-form-item>
                        <el-form-item label="购买人" prop="nickName">
                            <el-input clearable v-model.trim="formData.nickName"></el-input>
                        </el-form-item>
                        <el-form-item label="会员等级" prop="levelId">
                            <el-input clearable v-model.trim="formData.levelId"></el-input>
                        </el-form-item>
                        <el-form-item label="物流单号" prop="expressNo">
                            <el-input clearable v-model.trim="formData.expressNo"></el-input>
                        </el-form-item>
                        <el-form-item label="收件信息" prop="address">
                            <el-input clearable v-model.trim="formData.address"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态" prop="orderStatus">
                            <el-select clearable v-model="formData.orderStatus">
                                <!-- <el-option
                  v-for="(item, index) in orderStatus"
                  :label="item.name"
                  :key="index"
                  :value="item.id"
                >
                </el-option> -->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item class="empty-label">
                            <el-button type="primary" icon="el-icon-search" native-type="submit" :loading="loading">搜索
                            </el-button>
                            <el-button type="success" icon="el-icon-refresh">重置</el-button>
                            <el-button type="success" @click="add" icon="el-icon-refresh">新增表头</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            --
            <!-- <h3>表格二次封装</h3> -->

            <!-- <el-table :data="tableData" border>
        <el-table-column label="1" prop="date"></el-table-column>
        <el-table-column label="2" prop="name"></el-table-column>
        <el-table-column label="3" prop="address"></el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <span>自定义表头{{ scope.name }}</span>
          </template>
          <template slot-scope="scope">
            <el-button @click="test(scope.row)">点击事件</el-button>
          </template>
        </el-table-column>
      </el-table> -->
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                columns: [{
                        align: "center",
                        type: "expand",
                        slot: "expand",
                    },
                    {
                        prop: "date",
                        align: "center",
                        label: "date",
                    },
                    {
                        prop: "name",
                        align: "center",
                        label: "name",
                    },
                    {
                        prop: "address",
                        align: "center",
                        label: "address",
                    },
                    {
                        align: "center",
                        slot: "operation",
                    },
                ],
                tableData: [{
                        date: "2016-05-02",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1518 弄",
                    },
                    {
                        date: "2016-05-04",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1517 弄",
                    },
                    {
                        date: "2016-05-01",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1519 弄",
                    },
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        address: "上海市普陀区金沙江路 1516 弄",
                    },
                ],
                loading: false,
                formData: {
                    pageIndex: 1,
                    pageSize: 15,
                    orderStatus: "",
                    orderNo: "",
                    nickName: "",
                    levelId: "",
                    address: "",
                    expressNo: "",
                    orderBy: "createTime",
                    totalCount: 0,
                    desc: true,
                },
            };
        },
        methods: {
            add() {
                let obj = {
                    prop: "add",
                    label: "新增表头",
                };
                this.columns.splice(1, 0, obj);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        padding: 12px;
        box-sizing: border-box;
    }
</style>
